<template>
	<view class="container">
		
		<c-cu-custom bgColor="bg-gradual-theme" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">邀请成员</block>
		</c-cu-custom>
		
		<view class="" style="display: none;" v-for="(item,index) in list" :key="index">
			<l-painter
				css="width: 500rpx;"
				@fail="fail" @done="done" pathType="url" :ref="'poster-'+index" performance>
				
				<l-painter-view
					css="box-sizing: border-box; background: #ffffff; border-radius: 16rpx; width: 650rpx; box-shadow: 0 20rpx 58rpx rgba(0,0,0,.15)">
					<l-painter-image
						:src="item"
						css="object-fit: fill; object-position: 50% 50%; width: 100%; height: 850rpx;display:block" />
					<l-painter-view css="margin-top: 16rpx;height: 140rpx; ">
						<l-painter-image
							src="https://m.360buyimg.com/babel/jfs/t1/196317/32/13733/288158/60f4ea39E6fb378ed/d69205b1a8ed3c97.jpg"
							css="background: #ffffff; object-fit: cover; margin-left: 20rpx; margin-top: 20rpx; width: 84rpx; border: 2rpx solid #ffffff; box-sizing: border-box; height: 84rpx; border-radius: 50%;" />
							
						<l-painter-view css="margin-top: 16rpx; padding-left: 20rpx; display: inline-block">
							<l-painter-text text="隔壁老王"
								css="display: block; padding-bottom: 10rpx; color:  #000; font-size: 24rpx; fontWeight: bold" />
							<l-painter-text text="邀请码:xxxx" css="color: #000; font-size: 24rpx;fontWeight: bold" />
						</l-painter-view>
						
						<l-painter-qrcode css="width: 128rpx; height: 128rpx;padding-bottom: 10rpx;position:absolute;right:26%;" text="limeui.qcoon.cn"></l-painter-qrcode>
					</l-painter-view>
				</l-painter-view>
			</l-painter>
		</view>

		<view class="margin-top-sm">
			<u-swiper
				:list="pictures"
				previousMargin="30"
				nextMargin="30"
				circular
				:autoplay="false"
				radius="10"
				bgColor="unset"
				:height="550"
				:imgMode="fill"
				@change="swChange"
			></u-swiper>
		</view>
		

		<view class="cu-bar-box bg-white padding-bottom-sm">
			<view class="cu-bar tabbar bg-white">
				<view class="action">
					<u-icon name="share" :color="themeColor" size="28" labelPos="top"></u-icon>
					<view class="text-color-main text-lg text-blod">分享链接</view>
				</view>
				<view class="action" @click="saveImage">
					<u-icon name="photo" :color="themeColor" size="28" labelPos="top"></u-icon>
					<view class="text-color-main text-lg text-blod ">保存海报</view>
				</view>
				<view class="action">
					<u-icon name="share-square" :color="themeColor" size="28" labelPos="top"></u-icon>
					<view class="text-color-main text-lg text-blod">分享海报</view>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	import { getAllLevelInfo,getTeamConf } from "@/api/team.js";
	export default {
		data() {
			return {
				list: [],
				pictures: [],
				current:0,
			}
		},
		onLoad() {
			this.initConf();
		},
		onShow() {
			
		},
		methods: {
			initConf(){
				getTeamConf().then(res => {
					this.list = res.data.poster_imgs;
					
				});
			},
			draw() {
				var _this=this;
				let refs = this.$refs;
				for(var i=0;i<this.list.length;i++){
					console.log(refs['poster-'+i]);
					refs['poster-'+i][0].canvasToTempFilePathSync({
						fileType: 'jpg',
						quality: 1,
						success: (res) => {
							console.log(`mounted`, res.tempFilePath)
							_this.pictures.push(res.tempFilePath)
							// this.saveImage()
						}
					});
				}
			},
			
			swChange(res){
				console.log(res);
				this.current = res.current;
			},
			fail(v) {
				console.log(v)
			},
			done(v) {
				this.draw();
			},
			// 保存图征
			saveImage() {
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: this.pictures[this.current],
					success(res) {
						uni.showToast({
							title: '已保存到相册',
							icon: 'success',
							duration: 2000
						});
					},
				});
				// #endif
			}
		}
	}
</script>

<style lang="scss">
	.cu-bar-box {
		position: absolute;
		bottom: 0;
		width: 100%;
	}
</style>